<template>
  <view class="page">
    <u-form class="form form_right" :model="lostAndFoundData" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="发布类型" prop="releaseType" label-width="180" required>
        <js-radio v-model="lostAndFoundData.releaseType" dict-type="mis_release_type" itemLabel="dictValue"
          itemValue="dictKey"></js-radio>
      </u-form-item>
      <u-form-item label="物品类型" prop="goodsType" label-width="180" required>
        <js-select v-model="lostAndFoundData.goodsType" dict-type="mis_goods_type" itemLabel="dictValue"
          itemValue="dictKey" placeholder="请选择选项"></js-select>
      </u-form-item>
      <u-form-item label="联系人姓名" prop="contactName" label-width="200" required>
        <u-input placeholder="请输入联系人姓名" v-model="lostAndFoundData.contactName" type="text" maxlength="200"
          style="text-align: right;"></u-input>
      </u-form-item>
      <u-form-item label="联系方式" prop="contactMode" label-width="180" required>
        <u-input placeholder="请输入联系方式" v-model="lostAndFoundData.contactMode" type="text" maxlength="200"
          style="text-align: right;"></u-input>
      </u-form-item>
      <u-form-item label="标题" prop="title" label-width="180" required>
        <u-input placeholder="请输入标题" v-model="lostAndFoundData.title" type="text" maxlength="200"
          style="text-align: right;"></u-input>
      </u-form-item>
      <u-form-item label="物品描述" prop="goodsDesc" label-width="180" label-position="top" required count>
        <u-input type="textarea" placeholder="请输入物品描述" v-model="lostAndFoundData.goodsDesc" style="text-align: left;"
          height="100" maxlength="500" />
      </u-form-item>
      <u-form-item label="领取地点" prop="receiveAddr" label-width="180" v-if="lostAndFoundData.releaseType=='1'">
        <u-input placeholder="请输入领取地点" v-model="lostAndFoundData.receiveAddr" type="text" maxlength="200"
          style="text-align: right;"></u-input>
      </u-form-item>
      <u-form-item label="附件" label-width="180">
        <my-image-upload ref="myImageUpload" :maxCount="3" :disabled="disabled" :fileList="imgList"></my-image-upload>
        <text v-if="disabled">无</text>
      </u-form-item>
    </u-form>
    <view class="form-footer">
      <!-- <u-button class="btn" type="primary" @click="submit">提交</u-button> -->
      <view class="form-button primary" @click="submit">提交</view>
    </view>
  </view>
</template>
<script>
  import MyImageUpload from '@/components/my-uploadfile/my-image-upload.vue'
  import {
    validatenull
  } from '@/common/validate.js'
  import {
    selectDictValue
  } from '@/common/dict.js'
  export default {
    components: {
      MyImageUpload
    },
    data() {
      return {
        show: false,
        showGoodType: false,
        releaseTypeArr: [],
        releaseTypeList: [],
        goodsTypeList: [],
        latitude: 26.035576,
        longitude: 119.194726,
        imgList: [],
        disabled: false,
        lostAndFoundData: {
          releaseType: '1',
          goodsType: '',
          contactName: null,
          contactMode: null,
          title: null,
          goodsDesc: null,
          receiveAddr: null,
          pics: null,
        },
        rules: {
          goodsType: [{
            required: true,
            message: '请选择物品类型',
            trigger: ['change', 'blur'],
          }],
          contactName: [{
            required: true,
            message: '联系人姓名不允许为空',
            trigger: ['change', 'blur']
          }, ],
          contactMode: [{
            required: true,
            message: '联系方式不允许为空',
            trigger: ['change', 'blur']
          }, ],
          title: [{
            required: true,
            message: '标题不允许为空',
            trigger: 'blur'
          }, ],
          goodsDesc: [{
            required: true,
            message: '物品描述不允许为空',
            trigger: ['change', 'blur']
          }, ]
        },
      };
    },
    onLoad: function(param) {
      if (param.id != null) {
        this.getDetail(param.id);
      }
    },
    onReady(param) {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      getDetail(id) {
        let params = {}
        params.id = id;
        this.$u.api.mis.lostAndFound.detail(params).then(res => {
          this.lostAndFoundData = res.data
          this.lostAndFoundData.goodsType = res.data.goodsType.toString();
          this.lostAndFoundData.releaseType = res.data.releaseType.toString();
          if (!validatenull(this.lostAndFoundData.pics)) {
            let fileList = JSON.parse(this.lostAndFoundData.pics);
            let picFile = [];
            fileList.forEach((item) => {
              let json = {}
              json['fileName'] = item.label
              json['url'] = item.value
              picFile.push(json);
            })
            this.imgList = picFile;
          }
        })
      },
      checkboxChange: function(e) {
        if (this.lostAndFoundData.releaseType == '2') {
          this.lostAndFoundData.receiveAddr = ''
        }
      },
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            let file = this.$refs.myImageUpload.getFileList();
            if (file.length > 0) {
              this.lostAndFoundData.pics = JSON.stringify(file)
            }
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.mis.lostAndFound.save(this.lostAndFoundData).then(res => {
              if (res.code == 200) {
                uni.showModal({
                  title: '提示',
                  content: "保存成功！",
                  showCancel: false,
                  success: function() {
                    uni.navigateTo({
                      url: "index"
                    });
                  }
                });
              }
            });
            uni.hideLoading()
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateBack();
      }
    }
  };
</script>
<style lang="scss">
  .page {
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
  }

  .input-placeholder {
    text-align: right;
  }

  .u-input {
    text-align: right !important;
  }

  .u-form-item__message {
    text-align: right !important;
  }

  .uni-textarea-placeholder {
    text-align: left;
  }

  .form {
    padding: 32rpx 24rpx;
  }

  .u-form-item {
    padding: 16rpx 24rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }
  
  .form-footer {
    padding: 40rpx 24rpx;
  }

  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>